<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>vue选项卡</title>
	<style type="text/css">
		.tab ul {
			overflow: hidden;
			padding: 0;
			margin: 0;
		}

		.tab ul li {
			box-sizing: border-box;
			padding: 0;
			float: left;
			width: 100px;
			height: 45px;
			line-height: 45px;
			list-style: none;
			text-align: center;
			border-top: 1px solid blue;
			border-right: 1px solid blue;
			cursor
		}

		.tab ul li:first-child {
			border-left: 1px solid blue;
		}

		.tab ul li.active {
			background-color: orange;
		}

		.tab div {
			width: 500px;
			height: 300px;
			display: none;
			text-align: center;
			font-size: 30px;
			line-height: 300px;
			border: 1px solid blue;
			border-top: 0px;
		}

		.tab div.current {
			display: block;
		}
	</style>

</head>

<body>
	<div id="app">
		<div class="tab">
			<ul>
				<li :class="currentIndex==index?'active':''" v-for="(item,index) in list" @click="changeIndex(index)">
					{{item.title}}
				</li>
			</ul>
			<div v-for="(item,index) in list" :class="currentIndex==index?'current':''">
				<img :src="item.path" alt="apple">
			</div>
		</div>
	</div>
</body>

<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
	var vm = new Vue({
				el: '#app',
				data: {
					currentIndex:0,
					list: [{
						id: 1,
						title: 'apple',
						path: 'img/apple.png'
					},
					{
						id: 2,
						title: 'orange',
						path: 'img/orange.png'
					},
					{
						id: 1,
						title: 'lemon',
						path: 'img/lemon.png'
					}]
				},
				methods: {
					changeIndex:function(e){
						this.currentIndex = e
					}
				},
				})
</script>

</html>